<template>
    <span class="arrowDiv" id="arrowDiv" v-show="showArrowDiv" >
        <i :class="{'el-icon-arrow-right' : isActive, 'el-icon-arrow-left': !isActive}"></i>
        <i :class="{'el-icon-arrow-right' : isActive, 'el-icon-arrow-left': !isActive}"></i>
    </span>
</template>

<script>
    module.exports = {
        data() {
            return {
                showArrowDiv: true,
                isActive: true,
                aa: 123,
            };
        },
        methods:{
            change(){
                this.isActive = !this.isActive
            }
        },
        watch:{
            isActive(newName, oldName){
                console.log(newName)
            }
        }
    }
</script>
<style scoped>
    #arrowDiv{
        cursor: pointer;
        width: 35px;
        height: 50px;
        position: absolute;
        top: 40%;
        right: 0;
        text-align: center;
        line-height: 50px;
    }
    #arrowDiv i{
        margin: -8px;
        display:inline-block;
        position: relative;
        animation: arrowDiv 1s linear;
        animation-iteration-count: infinite
    }
    i:nth-child(1){
        opacity: .3;
    }
    i:nth-child(2){
        opacity: .7;
    }
    @keyframes arrowDiv {
        0%{left: -0.5em}
        100%{left: 0.5em}
    }
    @keyframes arrowDiv2 {
        0%{opacity: .1}
        100%{opacity: .6}
    }

</style>